<template>
  <div style="position:relative;">
    <flex-box v-if="data.enableSelect"
      style="display: inline-block;width: 55px;height: 23px;position: absolute;left: 0;top: 0;z-index: 100;">
      <cIcon @click="() => {
        try {
          data.callBack({
            op: 'unselectAll'
          })
        } catch (error) {

        }
      }" color="rgb(0,120,215)" style="transform: translateX(-7px);cursor: pointer;" v-if="(() => {
        for (let i = 0; i < data.list.length; i++) {
          if (!data.list[i]._selected) return false
        }
        return true
      })()" name="selected"></cIcon>
      <cIcon @click="() => {
        try {
          data.callBack({
            op: 'selectAll'
          })
        } catch (error) {

        }
      }" style="transform: translateX(-7px);cursor: pointer;" v-if="!(() => {
        for (let i = 0; i < data.list.length; i++) {
          if (!data.list[i]._selected) return false
        }
        return true
      })()" name="unselected"></cIcon>
    </flex-box>
    <el-table
    table-layout="auto"
    :fit="true"
    ref="dataTable" @select="(e) => {
      console.log(e)
    }" @selectAll="(e) => {
      console.log(e)
    }" :data="data.list" border style="width: 100%;position: absolute;left: 0;top: 0;width: 100%;height: 100%;" stripe
      >
      <el-table-column v-if="data.enableSelect" width="55">
        <template #default="scope">
          <cIcon @click="() => {
            try {
              data.callBack({
                op: 'unselect',
                item: scope.row
              })
            } catch (error) {

            }
          }" style="transform: translateY(3px);cursor: pointer;" color="rgb(0,120,215)"
            v-if="scope.row['_selected'] && showSelectBox" name="selected">
          </cIcon>
          <cIcon @click="() => {
            try {
              data.callBack({
                op: 'select',
                item: scope.row
              })
            } catch (error) {
              console.log(error)
            }
          }" style="transform: translateY(3px);cursor: pointer;" v-if="!scope.row['_selected'] && showSelectBox"
            name="unselected">
          </cIcon>
          <cIcon @click="() => {
            try {
              data.callBack({
                op: 'unselect',
                item: scope.row
              })
            } catch (error) {

            }
          }" style="transform: translateY(3px);cursor: pointer;" color="rgb(0,120,215)"
            v-if="scope.row['_selected'] && !showSelectBox" name="selected">
          </cIcon>
          <cIcon @click="() => {
            try {
              data.callBack({
                op: 'select',
                item: scope.row
              })
            } catch (error) {

            }
          }" style="transform: translateY(3px);cursor: pointer;" v-if="!scope.row['_selected'] && !showSelectBox"
            name="unselected">
          </cIcon>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="(() => {
        for (let i = 0; i < data.list.length; i++) {
          if (data.list[i].op && data.list[i].op.length) return true
        }
        return false
      })()">
        <template #default="scope"  :style="{
        minWidth: (()=>{
          let maxOpNum = 0
          data.list.forEach(element => {
            if(element.op && element.op.length>maxOpNum){
              maxOpNum = element.op.length
            }
          })
          re += maxOpNum*24 + 4
          return `${re}px`
        })()
      }" >
          <flexBox style="height: 100%;width: 100%;position: absolute;left: 0;top: 0;padding-left: 10px;" gap="5px" justifyContent="flex-start" >
            <span @click="() => {
              try {
                data.callBack({
                  op: subItem.op,
                  item: scope.row
                })
              } catch (error) {

              }
            }" v-bind:key="subItem" v-for="subItem in scope.row.op" :title="subItem.title"
              style="cursor: pointer;display: inline-block;width: 20px;height: 20px;position: relative;">
              <flexBox style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;">
                <cIcon :name="subItem.icon"></cIcon>
              </flexBox>
            </span>

          </flexBox>
        </template>
      </el-table-column>
      <el-table-column v-bind:key="item" v-for="item in data.form" :prop="item.field" :label="item.title">
        <template #default="scope">
          <span :title="scope.row[item.field]" style="word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;">{{ scope.row[item.field]
          }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
import cIcon from '../components/cIcon.vue'
import flexBox from '../components/flexBox.vue'
import tool from '../modules/tool'

const dataTable = ref()

const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
})

const showSelectBox = ref(true)

watch(() => props.data, async () => {
  // showSelectBox.value = false
  // await nextTick()
  // showSelectBox.value = true
  console.log(props.data)
})

onMounted(async () => {
  
})
</script>

<style scoped>
/* Vue 2 + Element UI */
/* .auto-width-table >>> .el-table__header,
.auto-width-table >>> .el-table__body {
  table-layout: auto !important;
} */

/* Vue 3 + Element Plus（如果你用的是这个） */
/* ::v-deep(.el-table__header),
::v-deep(.el-table__body) {
  table-layout: auto !important;
} */
</style>
